import ProTable from '@ant-design/pro-table';
import {Image, message, Switch} from "antd";
import {PageContainer} from "@ant-design/pro-layout";
import {ModalForm} from "@ant-design/pro-form";
import {administrator, deleteuser, systemadmin} from "@/services/ant-design-pro/management";
import IsShow from "@/pages/Management/Permissions/Administrator/components/IsShow";
import React, {useRef, useState} from "react";

export default () => {
  const [ isShowAdd, setisShowAdd ] = useState(false);
  const [ isrecord , setisrecord] = useState([])
  const actionRef = useRef<ActionType>()
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      search: false,
      hideInTable: true
    },
    {
      title: '姓名',
      dataIndex: 'account',
      search: false,
    },
    {
      title: '账号',
      dataIndex: 'account',
      tip: '标题过长会自动收缩',
      align: "center",
    },
    {
      title: '头像',
      dataIndex: 'state',
      align: "center",
      search: false,
      valueType: 'select',
      render: (_,record) =>(
        <Image
          width={50}
          src={record.avatar_url}
        />)
    },
    {
      title: '最后一次登录时间',
      dataIndex: 'created_at',
      align: "center",
      search: false,
      valueType: 'select',
    },
    {
      title: '最后一次登录ip',
      dataIndex: 'account',
      align: "center",
      search: false,
      valueType: 'select',
    },
    {
      title: '开启',
      dataIndex: 'status',
      search: false,
      render: (_, record) => (
        <Switch
          checkedChildren="开启"
          unCheckedChildren="关闭"
          defaultChecked={record.status === 1}
          onChange={async (valeue) => {
            await systemadmin(record.id, record.status)
            message.success('修改成功');
          }}
        />
      ),
    },
    {
      title: '操作',
      align: "center",
      search: false,
      render: (_, record) => [
        <a onClick={()=>{
          setisShowAdd(true)
          setisrecord(record)
        }}>编辑</a>,
        <ModalForm<{
          name: string;
          company: string;
        }>
          width='350px'
          title="删除"
          trigger={<a style={ {marginLeft: '30px'}}>删除</a>}
          modalProps={async (values) => {
            return true
          } }
          onFinish={async (values) => {
            message.success('提交成功');
            deleteuser(record.id)
            return true
          }}
        >
          <div>确定要删除吗？删除后将无法恢复，请谨慎操作！</div>
        </ModalForm>
      ],
    },
  ];
  return (
    <PageContainer
      header={ {
        title: '管理员列表',
        breadcrumb: {},
      } }
    >
      <ProTable
        columns={columns}
        actionRef={actionRef}
        request={async (params = {}) => {
          let {data, meta} = await administrator({...params})
          return {
            data,
            success: true,
            total: meta.total
          }
        }}
        editable={ {
          type: 'multiple',
        }}
        search={ {
          labelWidth: 'auto',
        }}
        pagination={ {
          pageSize: 20,
        }}
        rowKey={'id'}
        dateFormatter="string"
      />
      {isShowAdd ?
        <IsShow  showData={isrecord} setisShowAdd={setisShowAdd}  isedit={isShowAdd} issetEdit={setisShowAdd}  Formlist={(value)=>{
         actionRef.current.reload()
        }}/>
        :null
      }

    </PageContainer>
  );
};
